<template>
	<view class="page-container">
		<!-- 固定顶部选择器 -->
		<view class="fixed-header">
			<view class="ordertype-select">
				<uni-section title="工单类型" type="line">
					<uni-data-select 
						v-model="value" 
						:localdata="range" 
						@change="change" 
						:clear="false"
						class="type-selector"
					></uni-data-select>
				</uni-section>
			</view>
		</view>

		<!-- 添加间距避免内容被遮挡 -->
		<view class="content-padding"></view>
		
		<view class="orderlist">
			<uni-card 
				title="工单信息" 
				extra="2023-06-15" 
				v-for="i in 5" 
				:key="i"
				class="order-card"
			>
				<view class="card-content">
					<text class="order-title">工单标题 {{i}}</text>
					<text class="order-desc">这里是工单的详细描述内容，可以包含问题的具体情况和需要处理的事项。</text>
					<view class="order-status">
						<text class="status-text">待处理</text>
					</view>
				</view>
			</uni-card>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				value: 0,
				range: [{
						value: 0,
						text: "全部工单"
					},
					{
						value: 1,
						text: "已处理工单"
					},
					{
						value: 2,
						text: "未处理工单"
					},
				],
			};
		}
	}
</script>

<style lang="scss">
	.page-container {
		background-color: #f5f7fa;
		// min-height: 100vh;
		padding-bottom: 30rpx;
	}
	
	.fixed-header {
		position: sticky;
		top: 0;
		z-index: 999;
		background-color: #ffffff;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
	}
	
	.content-padding {
		height: 0rpx; /* 根据实际header高度调整 */
	}
	
	.ordertype-select {
		padding: 20rpx 30rpx;
		
		.type-selector {
			::v-deep .uni-select {
				border-radius: 12rpx;
				border: 1rpx solid #eaeaea;
			}
		}
	}
	
	.orderlist {
		padding: 0 30rpx;
		
		.order-card {
			margin-bottom: 30rpx;
			border-radius: 16rpx;
			box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
			border: none;
			
			.card-content {
				display: flex;
				flex-direction: column;
				
				.order-title {
					font-size: 32rpx;
					font-weight: bold;
					color: #333;
					margin-bottom: 16rpx;
				}
				
				.order-desc {
					font-size: 28rpx;
					color: #666;
					line-height: 1.6;
					margin-bottom: 20rpx;
				}
				
				.order-status {
					align-self: flex-end;
					
					.status-text {
						background-color: #fdf6ec;
						color: #e6a23c;
						padding: 6rpx 20rpx;
						border-radius: 20rpx;
						font-size: 24rpx;
					}
				}
			}
		}
	}
	
	// 覆盖uni-card默认样式
	.uni-card {
		::v-deep .uni-card__header {
			border-bottom: 1rpx solid #f1f1f1;
			padding-bottom: 20rpx;
		}
		
		::v-deep .uni-card__header-extra {
			color: #999;
			font-size: 26rpx;
		}
	}
</style>